<template>
  <u-popup
    v-model="show"
    mode="center"
    width="90%"
    height="830rpx"
    border-radius="20"
    :closeable="true"
    :duration="0"
  >
    <view class="poup">
      <view>支付详情</view>
      <view>
        <view>订单金额</view>
        <view class="amount">
          <view> ￥ </view>
          <view> {{ totalMoney }} </view>
        </view>
        <view>共计{{ totalMount }}件</view>
      </view>
      <!-- 支付方式 -->
      <view class="pay-method">
        <view
          v-for="(item, index) in payMethod"
          :key="index"
          :class="['pay-list', payIndex == index + 1 ? 'choose-active' : '']"
          @click="choosePayMethod(index + 1)"
        >
          <view>
            <view :class="['iconfont', item.icon, 'icon']"> </view>
            <view> {{ item.name }}</view>
          </view>
          <view class="iconfont icon-gou gou" v-if="payIndex == index + 1">
          </view>
        </view>
      </view>

      <view class="sub-btn">
        <u-button :custom-style="customStyleCancle" @click="canclePay">取消</u-button>
        <u-button :custom-style="customStyle" @click="toPay">立即支付</u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      ordersn: "", //订单号
      payIndex: 1, //支付方式  1->余额  2-> 微信
      customStyleCancle: {
        color: "#FFFFFF",
        width: "190rpx",
        backgroundColor: "#C7C7C7",
      },
      customStyle: {
        color: "#FFFFFF",
        width: "360rpx",
        backgroundColor: "#D65C45",
      },
      payMethod: [
        {
          name: "余额支付",
          icon: "icon-yue",
        },
        {
          name: "微信支付",
          icon: "icon-zhifu",
        },
      ],
      totalMount: 0,
      totalMoney: 0,
    };
  },
  methods: {
    /**
     * 选择支付方式
     */
    choosePayMethod(payIndex) {
      this.payIndex = payIndex;
    },
    /**
     * 去支付
     */
    toPay() {
      if (this.payIndex === 1) {
        this.toYuePay();
      } else {
        this.toWxPay();
      }
    },
	/**
	 * 取消支付
	 */
	canclePay(){
		uni.reLaunch({
			url:'/pages/builder/order?index=' + 0,
		})
	},
    /**
     * 余额支付
     */
    toYuePay() {
      var form = {
        ordersn: this.ordersn,
      };
      this.$u.api.yuePayApi(form).then((res) => {
        uni.reLaunch({
          url: "/pages/builder/order?index=" + 1,
        });
      });
    },
    /**
     * 微信支付
     */
    toWxPay() {
      var form = {
        ordersn: this.ordersn,
      };
      this.$u.api.wxPayApi(form).then((res) => {
        //小程序发起微信支付
        uni.requestPayment({
          provider: "wxpay",
          timeStamp: res.timeStamp.toString(),
          nonceStr: res.nonce_str,
          package: "prepay_id=" + res.prepay_id,
          signType: res.sign_type,
          paySign: res.sign,
          success: function (res) {
            uni.reLaunch({
              url: "/pages/builder/order?index=1",
            });
          },
          fail: function (err) {
            uni.reLaunch({
              url: "/pages/builder/order?index=0",
            });
          },
          complete: function () {},
        });
      });
    },
  },
};
</script>

<style scoped lang ='scss' >
@mixin flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.poup {
  padding: 30rpx;
  & > view:nth-child(1) {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 50rpx;
  }
  & > view:nth-child(2) {
    text-align: center;
    margin-bottom: 20rpx;
    .amount {
      @include flex-row;
      margin: 25rpx 0;
      color: #d65c45;
      font-weight: bold;
      & > view:nth-child(1) {
        font-size: 32rpx;
      }
      & > view:nth-child(2) {
        font-size: 70rpx;
      }
    }
  }
  .sub-btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 60rpx;
  }
  .pay-method {
    .pay-list {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;
      color: #999999;
      & > view:nth-child(1) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 44rpx;
      }
      .gou {
        color: #41b035;
        font-size: 50rpx;
      }
      .icon {
        font-size: 80rpx;
        margin-right: 10rpx;
      }
    }
    .choose-active {
      color: #41b035;
    }
  }
}
</style>
